<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js">
			
		</script>
	</head>
	<body>
		<div id="app1">
			数学成绩：<input v-model='math'><br>
			英语成绩：<input v-model="English"><br>
			总成绩，函数为：<input v-model="sum()"><br>
			总成绩，计算属性为：<input v-model="sum1"><br>
			<!-- 总成绩，双向绑定：<input v-model="sum2" ><br> -->
			<!-- 总成绩，监听器：<input v-model="sum3"> -->
		</div>
		<script>
			var vm = new Vue({
				el:"#app1",
				data:{
					math:120,
					English:99
				},
				// 函数
				methods:{
					sum(){
						return (this.math-0)+(this.English-0);
					}
				
					
				},
				// 计算属性
				computed:{
					sum1(){
						return (this.math-0)+(this.English-0);
					 }
					// sum2(){ 
					//        get(){
					//             return (this.math-0)+(this.English-0);
					//              }
					//                     //设置数据， 当 sumScore2 计算属性更新之后 ，则会调用set方法
					//        set() {var avgScore = newValue / 2
					// 			this.mathScore = avgScore
					// 			this.englishScore = avgScore}               
					                        
					//         }
					     },
					// sum3(){
						
					// }
					
				
				
			})
		</script>
	</body>
</html>
